/*
 * @author: liubing
 * @Date: 2020-07-19 15:36:09
 * @desc: 移动三角形
 */ 

const vs_source = `
    attribute vec4 a_Position;
    uniform mat4 u_ModelMatrix;
    attribute vec4 a_Color;
    varying vec4 u_Color;
    void main(){
        gl_Position = u_ModelMatrix * a_Position;
        u_Color = a_Color;
    }
    `;

const fs_source = `
    precision mediump float;
    varying vec4 u_Color;
    void main(){
        gl_FragColor = u_Color;
    }`;

const ANGLE_STEP = 45.0;
const COLOR_CHANGE_STEP = 250;
// let  g_last = Date.now();
let g_last;
let color_array = [1.0,0.0,0.0,1.0,0.0,1.0,0.0,1.0,0.0,0.0,1.0,1.0,];

// 
function animate(angle){
    let now = Date.now();
    g_last = g_last||now;

    let elapsed = now - g_last;
    g_last = now;

    var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
    return newAngle %= 360;
}

let last_frame;
function randomColor(){
    let color = [];
    let now = Date.now();
    last_frame = last_frame||now;
    let elapsed = now - last_frame;
    // elapsed = 0
    if (elapsed > COLOR_CHANGE_STEP){
        last_frame = now;
        color_array = [Math.random(),Math.random(),Math.random(),1.0,
            Math.random(),Math.random(),Math.random(),1.0,
            Math.random(),Math.random(),Math.random(),1.0];
    }else {
        color_array = color_array;
    }
    return color_array;
}
// 画图
function draw(gl,n,currentAngle,modelMatrix,uModelMatrix){
    modelMatrix.setRotate(currentAngle,0,0,1);
    gl.uniformMatrix4fv(uModelMatrix,false,modelMatrix.elements);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES,0,n);
}

function draw2(gl,n,currentAngle,modelMatrix,colorData){
    // print("color",color);
    // console.log("color",colorData);
    modelMatrix.setRotate(currentAngle,0,0,1);

    let u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
    if(!u_ModelMatrix){
        console.log("u_ModelMatrix Failed!!");
        return;
    }
    gl.uniformMatrix4fv(u_ModelMatrix,false,modelMatrix.elements);
    
    let colors = new Float32Array(colorData);
    gl.bufferData(gl.ARRAY_BUFFER,colors,gl.STATIC_DRAW);
    // let a_Color = gl.getAttribLocation(gl.program,'a_Color');
    // gl.vertexAttribPointer(a_Color,4,gl.FLOAT,false,0,0);
    // gl.enableVertexAttribArray(a_Color);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES,0,n);
}

function initVertexBuffers(gl){

    var vertices = new Float32Array([
        0,0.44,
        -0.5,-0.44,
        0.5,-0.44
    ]);
    let n = 3;

    var vertexBuffer = gl.createBuffer();
    if(!vertexBuffer){
        console.log('Failed to create Buffer Object');
        return -1;
    }
    gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

    let a_Position = gl.getAttribLocation(gl.program,'a_Position');
    if(a_Position < 0){
        console.log("Failed to get Position");
        return -1;
    }
    gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);
    gl.enableVertexAttribArray(a_Position)

    let colorBuffer = gl.createBuffer();
    if(!colorBuffer){
        console.log("Failed to create the ColorBuffer");
        return -1
    }
    // let colors = new Float32Array([
    //     1.0,0.0,0.0,1.0,
    //     0.0,1.0,0.0,1.0,
    //     0.0,0.0,1.0,1.0]);
    // let colors = new Float32Array()
    gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer);
    // gl.bufferData(gl.ARRAY_BUFFER,colors,gl.STATIC_DRAW);
    let a_Color = gl.getAttribLocation(gl.program,'a_Color');
    gl.vertexAttribPointer(a_Color,4,gl.FLOAT,false,0,0);
    gl.enableVertexAttribArray(a_Color);

    return n;
}

function main(){

    let canvas = document.getElementById("glCanvas");
    const gl = canvas.getContext('webgl');
    if(!gl){
        console.log("WebGL Failed");
        return;
    }
    console.log("width",canvas.width)
    console.log("height",canvas.height)
    gl.viewport(0, 0, canvas.width, canvas.height)

    if(!initShaders(gl,vs_source,fs_source)){
        console.error("Failed init Shader");
        return;
    }

    let n = initVertexBuffers(gl)
    if(n < 0){
        console.error("initVertexBuffer Failed");
        return;
    }

    gl.clearColor(0,0,0.5,1);

    let u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
    if(!u_ModelMatrix){
        console.log("u_ModelMatrix Failed!!");
        return;
    }

    var currentAngle = 0.0;
    var modelMatrix = new Matrix4();

    var tick = function(){
        currentAngle = animate(currentAngle);
        // currentAngle = 360
        let colors = randomColor()
        // colors = [Math.random(),Math.random(),Math.random(),Math.random()];
        // console.log(colors);
        draw2(gl,n,currentAngle,modelMatrix,colors);
        requestAnimationFrame(tick);
    }
    tick();
}
